<template>
  <div class="app-container">
    <!-- 标签页 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="超标分析" name="exceedAnalysis"></el-tab-pane>
        <el-tab-pane label="在线异常" name="onlineAbnormal"></el-tab-pane>
    </el-tabs>
    <!-- 筛选条件 -->
    <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <el-form-item label="区划:">
            <el-select v-model="filterForm.CountyCode" placeholder="请选择" clearable>
                <el-option v-for="item in regionList" :label="item.name" :value="item.code"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称:">
            <el-input v-model="filterForm.polluteName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="时间:">
            <el-date-picker
                v-model="filterForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                unlink-panels
            ></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="searchData">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 主要数据表格 -->
    <el-table v-if="activeTab=='exceedAnalysis'" :data="companyList" border style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="County" label="县区"></el-table-column>
        <el-table-column prop="PolluteName" label="企业名称"></el-table-column>
        <el-table-column prop="PollutantName" label="超标因子"></el-table-column>
        <el-table-column prop="frequencyCount" label="因子超标次数"></el-table-column>
        <el-table-column prop="overWarnCount" label="超标时长 (小时)"></el-table-column>
        <el-table-column label="操作" width="100px">
            <template #default="scope">
            <el-button size="small" type="text" @click="showDetails(scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-table v-if="activeTab=='onlineAbnormal'" :data="onlineAbnormalList" border style="width: 100%" v-loading="loading">
        <el-table-column prop="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="County" label="县区"></el-table-column>
        <el-table-column prop="PolluteName" label="企业名称"></el-table-column>
        <el-table-column prop="dataTypeName" label="异常类型"></el-table-column>
        <el-table-column prop="cscount" label="异常次数"></el-table-column>
        <el-table-column prop="overWarnCount" label="异常时长 (小时)"></el-table-column>
        <el-table-column label="操作" width="100px">
            <template #default="scope">
            <el-button size="small" type="text" @click="showDetails(scope.row)">详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        v-if="total>0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!-- 排放口超标详情弹窗 -->
    <el-dialog title="排放口超标详情" :visible.sync="dialogVisible" width="80%" append-to-body>
      <el-table v-if="activeTab=='exceedAnalysis'" :data="chaobiaoDetailList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="outPortName" label="排口名称"></el-table-column>
        <el-table-column prop="MonitorTime" label="超标时间"></el-table-column>
        <el-table-column prop="pollutantName" label="超标因子"></el-table-column>
        <el-table-column prop="warmTypeName" label="超标类型"></el-table-column>
        <el-table-column prop="avgstrength" label="超标量"></el-table-column>
        <!-- <el-table-column prop="upperLimit" label="超标上限"></el-table-column>
        <el-table-column prop="lowerLimit" label="超标下限"></el-table-column> -->
      </el-table>
      <el-table v-if="activeTab=='onlineAbnormal'" :data="yiChangDetailList" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="outPortName" label="排口名称"></el-table-column>
        <el-table-column prop="pollutantName" label="异常因子"></el-table-column>
        <el-table-column prop="dataTypeName" label="异常类型"></el-table-column>
        <el-table-column prop="exval" label="异常值"></el-table-column>
        <el-table-column prop="beginTime" label="异常开始时间"></el-table-column>
        <el-table-column prop="endTime" label="异常结束时间"></el-table-column>
        <el-table-column prop="overWarnCount" label="异常时长（小时）"></el-table-column>
      </el-table>
      <el-pagination
            v-if="dtotal>0"
            @size-change="D_handleSizeChange"
            @current-change="D_handleCurrentChange"
            :current-page="dpageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="dpageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dtotal">
        </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import { getoverdataforenterprise,getEnterpriseDetail,getExceptionCountByenterprise,getExceptionEnterpriseDetail} from './api.js';
import { getRegionList } from '@/api/dataResources/monitorData/region.js'
export default {
  name: 'HighRiskCompanies',
  data() {
    return {
      activeTab: 'exceedAnalysis',
      regionList: [],
      filterForm: {
        CountyCode: '',
        polluteName: '',
        dateRange:[],
      },
      total:0,
      pageNum: 1,
      pageSize: 10,
      dtotal:0,
      dpageNum: 1,
      dpageSize: 10,
      companyList:[],
      detailsList: [],
      onlineAbnormalList: [],
      chaobiaoDetailList:[],
      yiChangDetailList:[],
      loading: false,
      dialogVisible: false
    }
  },
  created() {
    let beginTime = $moment().offset('month',-1).format(`{yyyy}-{mm}-{dd}`);
    let endTime = $moment().format(`{yyyy}-{mm}-{dd}`);
    this.filterForm.dateRange = [beginTime,endTime];
    this.getRegionList();
    this.getList();
  },
  methods: {
    async getRegionList(){
        let res = await getRegionList('0');
        if(res.code == 200){
            this.regionList = res.rows
        }
    },
    getList(){
        let apiParams = {
            CountyCode: this.filterForm.CountyCode,
            polluteName: this.filterForm.polluteName,
            beginTime: this.filterForm.dateRange[0],
            endTime: this.filterForm.dateRange[1],
            pageSize: this.pageSize,
            pageNum: this.pageNum
        };
        this.total = 0;
        this.loading = true;
        if(this.activeTab == 'exceedAnalysis'){
            this.getoverdataforenterpriseData(apiParams)
        } else {
            this.getExceptionCountByenterpriseData(apiParams)
        }
    },
    async getoverdataforenterpriseData(apiParams){
        let res = await getoverdataforenterprise(apiParams);
        if(res.code == 200){
            this.companyList = res.rows;
            this.total = res.total;
        }
        this.loading = false;
    },
    async getExceptionCountByenterpriseData(apiParams){
        delete apiParams.pageNum;
        delete apiParams.pageSize;
        let res = await getExceptionCountByenterprise(apiParams);
        if(res.code == 200){
            this.onlineAbnormalList = res.data;
        }
        this.loading = false;
    },
    handleSizeChange(val){
        this.pageSize = val;
        this.pageNum = 1;
        this.getList();
    },
    handleCurrentChange(val){
        this.pageNum = val;
        this.getList();
    },
    D_handleSizeChange(val){
        this.dpageSize = val;
        this.dpageNum = 1;
        this.getDetailData();
    },
    D_handleCurrentChange(val){
        this.dpageNum = val;
        this.getDetailData();
    },
    handleTabClick(tab) {
        this.getList();

    },
    searchData() {
         this.getList();
    },
    async getDetailData(row){
        this.dpageSize = 10;
        this.dpageNum = 1;
        this.dtotal = 0;
        let params = {
            polluteId:row.ID,
            beginTime:this.filterForm.dateRange[0],
            endTime:this.filterForm.dateRange[1],
            pageNum:this.dpageNum,
            pageSize:this.dpageSize,
        }
        console.log(this.activeTab);
        if(this.activeTab == 'exceedAnalysis'){
            await this.getChaoBiaoDetail(params);
        } else {
            params.dataType = row.dataType;
            await this.getyiChangDetail(params);
        }
    },
    async getChaoBiaoDetail(params){
        let res = await getEnterpriseDetail(params);
        if(res.code == 200) {
            this.chaobiaoDetailList = res.rows;
            this.dtotal = res.total;
        }
    },
    async getyiChangDetail(params){
        let res = await getExceptionEnterpriseDetail(params);
        if(res.code == 200) {
            this.yiChangDetailList = res.rows;
            this.dtotal = res.total;
        }
    },

    async showDetails(row) {
        await this.getDetailData(row);
        this.dialogVisible = true
      // 这里可以根据实际需求动态加载详情数据
      console.log('查看详情:', row)
    }
  }
}
</script>

<style scoped>

</style>